<template>
  <div>
    <h3>模板语法</h3>
    <div>massage:{{ msg }}</div>
    <div v-html="vhtml"></div>
    <div :class="className">这是一个class</div>
    <div :class="classObj">这是一个classObj</div>
    <div :class="classArr">这是一个classArr</div>
    <div :style="styleObj">这是一个styleObj</div>
    <div ref="reactiveRefs">reactiveObj:{{ reactiveObj.a }}</div>
    <div>refObj:{{ refObj.a.a }}</div>
    divp
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  toRef,
  toRefs,
  unref,
  readonly,
  isRef,
  isReactive,
  isProxy,
  onMounted
} from 'vue'

onMounted(() => {
  console.log('template')
})
const msg = ref('这是一条信息')
const vhtml = ref(`<div>知识一条html</div>`)
const className = 'className'
const classObj = {
  className: true
}
const classArr = ['className']
const styleObj = {
  color: 'red'
}
//reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的
//局限性  限的值类型：它只能用于对象类型 reactive(1)X ;
// 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的 reactiveObj=reactive({b:123})X;
// 对解构操作不友好 let { a } = reactiveObj X 特别是对于函数参数传递reactiveObj.a 不具备响应式
const reactiveObj = reactive({
  a: 123
})
const refObj = ref({
  a: {
    a: 123123
  }
})
//放弃深度响应使用shallowRef
const reactiveRefs = ref()
setTimeout(async () => {
  msg.value += '!!!!!!'
  reactiveObj.a = reactiveObj.a + 'cccc'
  refObj.value.a.a = 'bbbb'
  console.log(reactiveRefs.value.innerHTML) //123
  await nextTick() // 立即更新页面
  console.log(reactiveRefs.value.innerHTML) //123cccc
}, 1000)

//ref 解包
// 在模板中解包的注意事项​
// 在模板渲染上下文中，只有顶级的 ref 属性才会被解包
const count = ref(0)
const state = reactive({
  count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1

const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) //
//readonly
let value = ref('0') // 局部变量
let readonlyValue = readonly(ref(0)) // 用于导出
</script>

<style scoped>
.className {
  color: blue;
}
</style>
